<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .div1,.div2,.div3,.div4{
            border:1px solid #000;
        }
        .div1{
            width: 200px;
            height: 200px;
        }
        .div2{
            width: 150px;
            height: 150px;
        }
        .div3{
            width: 100px;
            height: 100px;
        }
        .div4{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            按键修饰符
                可以使用按键码或按键码的别名
                a、b、c.....
                .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
                .ctrl .alt .shift .meta
         -->
        <input type="text" @keyup="show($event)"> <br>
        <input type="text" @keyup.65="show($event)"> <br>
        <input type="text" @keyup.b="show($event)"> <br>
        <input type="text" @keyup.enter="show($event)"> <br>
        <input type="text" @keyup.left="show($event)" @keyup.right="show($event)"> <br>
        <!-- 修饰符可以同时使用多个，一般为或者的关系 -->
        <input type="text" @keyup.a.b.c="show($event)"> <br>
        <!-- 同时按Ctrl+C时触发，并且的关系 -->
        <input type="text" @keyup.ctrl.c="show($event)"> <br>
        <input type="text" @keyup.ctrl.shift.a="show($event)"> <br>
        <hr>

        <!-- 
            功能修饰符
                事件冒泡：当一个元素上的事件被触发时，事件从事件源开始，往上冒泡直到页面的根元素，这一过程称为事件冒泡（默认方式）
                事件捕获：当一个元素上的事件被触发时，事件从页面的根元素开始，往下直到事件目标元素，这一过程称为事件捕获
         -->
        <div class="div1" @click.capture="print('div1')">div1
            <div class="div2" @click.capture.self="print('div2')">div2
                <div class="div3" @click.capture.stop="print('div3')">div3
                    <div class="div4" @click.capture="print('div4')">div4</div>
                </div>
            </div>
        </div> 
        <hr>

        <!-- 
            事件代理/事件委托：利用事件冒泡机制，通过给父元素绑定事件，从而实现对所有子元素的事件管理，无需为每个子元素绑定事件
                优点：1.减少事件注册，降低内存占用
                      2.新增元素时实现动态绑定事件
         -->
         <ul @click.capture.stop="doLi($event)">
             <!-- <li @click="doLi($event)">li1</li>
             <li @click="doLi($event)">li2</li>
             <li @click="doLi($event)">li3</li>
             <li @click="doLi($event)">li4</li>
             <li @click="doLi($event)">li5</li> -->
             <li>li1</li>
             <li>li2</li>
             <li>li3</li>
             <li>li4</li>
             <li>li5</li>
         </ul>
         <button>添加li</button>
         <hr>
         
         <!-- 
             阻止事件的默认行为
                触发某些事件时默认会执行的行为，如：点击右键时默认会弹出菜单、点击链接时默认会跳转
          -->
         <button @contextmenu.prevent="write()">右键点击</button> 
         <a href="#" @click.prevent="write()">点我</a>
         <hr>

         <!-- 
            一次性触发
          -->
         <button @click.once="write()">只触发一次</button> 
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        methods:{
            show(e){
                // console.log(e.target.value);

                console.log(e);
                // if(e.keyCode==13){
                //     console.log('按了回车');
                // }
            },
            print(name){
                console.log(name);
            },
            doLi(e){
                console.log(e.target); // 事件代理时target为触发事件的dom对象，即子元素li，而非父元素ul
            },
            write(){
                console.log(111);
            }
        }
    });
</script>
</html>